<template>
  <div class="inConbox clearfix content_heardPo_box">
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <ul class="content_Setup clearfix">
      <li class="content_li_box dip ju_al_bet">
        <!-- <li class="content_li_box dip ju_al_bet"  @click="getSetUser()"> -->
        <!-- <section class="content_li_left dip ju_al_bet ">  -->
          <!-- 这是直弹出 -->
        <section class="content_li_left poas_res">
          <!--地层数据 -->
          <div class="content_li_leftBOX dip ju_al_bet">
            <span class="content_li_font">头像</span>
            <img :src="this.userifondetails.user.picture" alt="" class="content_li_img bdrb" v-if="this.userifondetails.user.picture != ''">
            <img src="../../../static/images/userifon/user_model.png" alt="" class="content_li_img" v-else>
          </div>
          <!-- 选着相册   -->
          <form class="content_li_leftBOX poas_res_child">
            <input type="file" id="xFile2"  accept="image/*"  name="file1"  class="content_HTp_INput"  @change.stop="upload" >
            <!-- <input id="xFile2" type="file" @change.stop="upload" accept="image/*" capture="camera"> 
            <input id="xFile2" type="file" @change.stop="upload" capture="camera">  -->
          </form>
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <li class="content_li_box dip ju_al_bet">
        <section class="content_li_left dip ju_al_bet">
            <span class="content_li_font">昵称</span>
            <input type="text" class="content_li_text" v-if="userIfonattr.nickName != ''" :placeholder="userIfonattr.nickName" v-model="userIFonName" @input="getnumbermoney(userIFonName)">    
            <input type="text" class="content_li_text" v-else-if="userIfonattr.name != ''" :placeholder="userIfonattr.name" v-model="userIFonName" @input="getnumbermoney(userIFonName)">
            <input type="text" class="content_li_text" v-else placeholder="请输入您的呢称" v-model="userIFonName" @input="getnumbermoney(userIFonName)">
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <li class="content_li_box dip ju_al_bet">
        <section class="content_li_left dip ju_al_bet">
          <span class="content_li_font">联系电话</span>
          <!-- <input type="text" class="content_li_text"  v-if="userIfonattr.contactsPhone != ''" :placeholder="userIfonattr.contactsPhone" v-model="phoneNumbers"> -->
          <input  type="text" class="content_li_text"  :placeholder="userIfonattr.contactsPhone != null || userIfonattr.contactsPhone != undefined ? userIfonattr.contactsPhone : '请输入您的手机号'" v-model="phoneNumbers" @input="getnumbermoney(phoneNumbers)">
          <!-- <input  type="text" class="content_li_text"  v-else  placeholder="请输入您的手机号" v-model="phoneNumbers"> -->
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <li class="content_li_box dip ju_al_bet">
        <section class="content_li_left dip ju_al_bet">
            <span class="content_li_font">常用邮箱</span>
            <!-- <input type="text" class="content_li_text"  v-if="userIfonattr.email != null || userIfonattr.email != undefined" :placeholder="userIfonattr.email"  v-model="emails"> -->
            <input type="text" class="content_li_text"  :placeholder="userIfonattr.email != null || userIfonattr.email != undefined ? userIfonattr.email : '请输入您的邮箱'"  v-model="emails" @input="getnumbermoney(emails)">
            <!-- <input type="text" class="content_li_text"  v-else   placeholder="请输入您的邮箱"  v-model="emails"> -->
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <!-- 认证 -->
      <li class="contetn_setUp_btnBox bdr" v-if="this.userIfonattr.certificationLevel == 1">
        <div  class="content_li_img——assis dip ju_al">
          <img src="../../../static/images/userifon/assis_icon.png" alt="" >
          <span class="assis_text">(未进行平台认证)</span>
        </div>
        <button class="contetn_setUp_btn bdr content_SetUP_btnBOxCor" :class="{'content_SetUP_btnBOxCor2':this.assis_btn}"  @click="getUserassisretrun()">立即认证</button>
      </li>
      <li class="contetn_setUp_btnBox bdr" v-else>
        <div  class="content_li_img——assis dip ju_al">
          <img src="../../../static/images//Order/assisLogo.png" alt="">
          <span class="assis_text assis_textactibre">(已完成平台认证)</span>
        </div>
        <button class="contetn_setUp_btn bdr assis_btn">立即认证</button>
      </li>
      <!-- 点击提交 -->
    </ul>
    <footer class="contetn_setUp_btnBox bdr footer_box" >
      <button class="contetn_setUp_btn bdr" :class="{'content_SetUP_btnBOxCor':this.userMoneyActive,'content_SetUP_btnBOxCor2':this.userMoneyActive2}"  @click="getUserIfondetilad()">提交</button>
    </footer>
    <!-- 调用摄像头 -->
    <!-- <transition name="slide-block" >
      <div class="content_Headportrait" v-if="blockIMG" @click="setnone()">
        <section class="content_HPT_box " v-if="blockIMG">
          <div class="dipW ju_al cntent_HTP clearfix" v-if="blockIMG">
            <span class="content_HTp_title" v-if="blockIMG">选着头像</span>
            <div v-if="blockIMG" class="posh">
              <label class="content_HTp_Photograph" for="xFile" v-if="blockIMG">拍照</label>
              <form><input type="file" id="xFile"  accept="image/*"  name="file"  capture="camera" class="content_HTp_INput"  @change.stop="upload"></form>
            </div>
            <div v-if="blockIMG" class="posh">
              <label for="xFile2" class="content_HTp_Photograph content_HTPCOR" v-if="blockIMG">从手机相册选着</label>
              <form><input type="file" id="xFile2"  accept="image/*"  name="file1"   class="content_HTp_INput"  @change.stop="upload"></form>
            </div>
          </div>
          <div v-if="blockIMG" class="posh">
            <button class="content_HTp_Photograph content_HTPCOR"  v-if="blockIMG" @click.stop="setnone()"> 取消</button>
          </div>
        </section>
      </div>
    </transition> -->
  </div>
</template>
<script>
import Exif from 'exif-js' 
import bus from '@/assets/bus/js/bus.js'
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        // url:'/bomNav/userContent',
        url:'',
        text:'设置',
      },
      userifondetails:'', //获取渲染的个人信息
      userIfonattr:'',//详情
      blockIMG:false, // 调用摄像头
      userIFonName:'', //姓名
      phoneNumbers:'',//手机
      emails:'',//邮箱
      daySnumberDindex:'',// 获取下标(上传下表)
      picValue:'',//保存图片信息的
      picIMg:'', 
      retrunfalse:true, //判断手机号
      retrunemail:true, //判断邮箱
      inputText:true,//改变字体颜色
      inputText2:true,//改变字体颜色
      userMoneyActive:false,//信息改动input变色
      userMoneyActive2:false,
      result:'',//相册的元素
      assis_btn:false, //认证
      hj:'',
    }
  }
  ,components: {Nav}
  ,methods:{

    getSetUser(){ //显示调用头像框（无）
      this.blockIMG = !this.blockIMG
    },
    setnone(){ // 点击消失头像框（无）
      this.blockIMG = false
    },


    upload (e) {  //拍照
      let files = e.target.files || e.dataTransfer.files || event.target.files; //兼容
      if (!files.length){ //小于0就出去
        return;  
      } 
      this.picValue = files[0];  //获取图像信息
      this.imgPreview(this.picValue); //调用处理函数 
      this.userMoneyActive = true
    },  
    imgPreview (file) {  
      let self = this;  //缓存this
      let Orientation;  
      Exif.getData(file, function(){  //去获取拍照时的信息，解决拍出来的照片旋转问题，这是调用插件的事件获取图像的事件
          Orientation = Exif.getTag(this, 'Orientation');  
      });  
      if (!file || !window.FileReader) return;  // 看支持不支持FileReader  
  
      if (/^image/.test(file.type)) {  
          let reader = new FileReader();   // 创建一个reader  
          reader.readAsDataURL(file);    // 将图片2将转成 base64 格式  
          reader.onload = function () {   // 读取成功后的回调  
            let result = this.result;  
            let img = new Image();  
            img.src = result;  
            if (this.result.length <= (100 * 1024)) {  //判断图片是否大于100K,是就直接上传，反之压缩图片  
              self.userifondetails.user.picture = this.result; //显示改变后的图片 
              self.postImg();  //调用毁掉函数
            }else {  
              img.onload = function () {  
                let data = self.compress(img,Orientation); //这里调用压缩事件
                self.userifondetails.user.picture = data;  
                self.postImg();  
              }  
            }  
          }   
        }  
      },  
      postImg () {  
        var zipFormData = new FormData();
        zipFormData.append("file",this.picValue);
        this.axios.post( this.$busPoat.upload(),zipFormData).then(response=>{
          console.log(response)
          if(response.data.iplanCode == '200'){
             alert('上传头像成功')
            this.picIMg = response.data.url
          }
        }).catch(error=>{
          alert('上传头像失败')
          console.log(error)
        })
      },  
      rotateImg (img, direction,canvas) {  
        //最小与最大旋转方向，图片旋转4次后回到原方向      
        const min_step = 0;      
        const max_step = 3;        
        if (img == null)return;      
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
        let height = img.height;      
        let width = img.width;        
        let step = 2;      
        if (step == null) {      
            step = min_step;      
        }      
        if (direction == 'right') {      
            step++;      
            //旋转到原位置，即超过最大值      
            step > max_step && (step = min_step);      
        } else {      
            step--;      
            step < min_step && (step = max_step);      
        }       
        //旋转角度以弧度值为参数      
        let degree = step * 90 * Math.PI / 180;      
        let ctx = canvas.getContext('2d');      
        switch (step) {      
          case 0:      
              canvas.width = width;      
              canvas.height = height;      
              ctx.drawImage(img, 0, 0);      
              break;      
          case 1:      
              canvas.width = height;      
              canvas.height = width;      
              ctx.rotate(degree);      
              ctx.drawImage(img, 0, -height);      
              break;      
          case 2:      
              canvas.width = width;      
              canvas.height = height;      
              ctx.rotate(degree);      
              ctx.drawImage(img, -width, -height);      
              break;      
          case 3:      
              canvas.width = height;      
              canvas.height = width;      
              ctx.rotate(degree);      
              ctx.drawImage(img, -width, 0);      
              break;  
        }      
    },  
    compress(img,Orientation) {  
      let canvas = document.createElement("canvas");  
      let ctx = canvas.getContext('2d');  
        //瓦片canvas  
      let tCanvas = document.createElement("canvas");  
      let tctx = tCanvas.getContext("2d");  
      let initSize = img.src.length;  
      let width = img.width;  
      let height = img.height;  
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
      let ratio;  
      if ((ratio = width * height / 4000000) > 1) {  
        console.log("大于400万像素")  
        ratio = Math.sqrt(ratio);  
        width /= ratio;  
        height /= ratio;  
      } else {  
        ratio = 1;  
      }  
      canvas.width = width;  
      canvas.height = height;  
      //        铺底色  
      ctx.fillStyle = "#fff";  
      ctx.fillRect(0, 0, canvas.width, canvas.height);  
      //如果图片像素大于100万则使用瓦片绘制  
      let count;  
      if ((count = width * height / 1000000) > 1) {  
        console.log("超过100W像素");  
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
      //            计算每块瓦片的宽和高  
        let nw = ~~(width / count);  
        let nh = ~~(height / count);  
        tCanvas.width = nw;  
        tCanvas.height = nh;  
        for (let i = 0; i < count; i++) {  
          for (let j = 0; j < count; j++) {  
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);  
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);  
          }  
        }  
      } else {  
        ctx.drawImage(img, 0, 0, width, height);  
      }  
      //修复ios上传图片的时候 被旋转的问题  
      if(Orientation != "" && Orientation != 1){  
        switch(Orientation){  
          case 6://需要顺时针（向左）90度旋转  
              this.rotateImg(img,'left',canvas);  
              break;  
          case 8://需要逆时针（向右）90度旋转  
              this.rotateImg(img,'right',canvas);  
              break;  
          case 3://需要180度旋转  
              this.rotateImg(img,'right',canvas);//转两次  
              this.rotateImg(img,'right',canvas);  
              break;  
        }  
      }  
      //进行最小压缩  
      let ndata = canvas.toDataURL('image/*', 0.1);  
      // console.log('压缩前：' + initSize);  
      // console.log('压缩后：' + ndata.length);  
      // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");  
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;  
      return ndata;  
    }, 






    getValueemails(){ 
      if(this.emails != ''){
        if(!bus.emails().test(this.emails)){
          alert('请输入正确的邮箱')
          this.emails = ''
          this.retrunemail = false
        }else{
          this.retrunemail = true 
        }
      }else if(this.emails  == ''){
        this.retrunemail = true
      }
    },
    getnumbermoney(obj){ //监听输入元素
      if(obj != ''){
        this.userMoneyActive = true 
      }else{
        this.userMoneyActive = false
      }
    },
    getUserIfondetilad(){  //点击提交
      if(this.phoneNumbers != ''){ //有值
        if(!bus.number().test(this.phoneNumbers)){
          alert('请输入正确的手机号')
          this.phoneNumbers = ''
          this.retrunfalse = false //错误false
        }else{
          this.retrunfalse = true //正确true
          this.getValueemails()
        }
      }else if(this.phoneNumbers == ''){ //没有值
        this.retrunfalse = true
        this.getValueemails()
      }
      if(this.retrunfalse && this.retrunemail){
        this.$store.dispatch('showloader')
        this.userMoneyActive2 = true     
        var updatePersonInfo = {
          "picture":this.picIMg != '' ?this.picIMg :null, //头像
          "storeName":null,//店铺
          "contactsPhone":this.phoneNumbers != '' ?this.phoneNumbers :null,
          "address":null,
          "industry":null,
          "email":this.emails != '' ? this.emails :null,
          "nickName":this.userIFonName != '' ?this.userIFonName :null
        }
        // console.log(updatePersonInfo)
        this.axios.post(this.$busPoat.updatePersonInfo(),updatePersonInfo).then(response=>{
          this.$store.dispatch('showuserifonS')
          var st;
          clearTimeout(st)
          st = setTimeout(() =>{
            if(response != null || response != undefined){
              this.$store.dispatch('hideloader')              
              // console.log(response)
              if(response.data.iplanCode == '101'){
                //logn结束
                this.$router.back()
                // console.log(response)
              }else{
                this.$router.back()            
              }
            }else{
            this.$store.dispatch('hideloader')
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },2000)
        }).catch(error=>{
          this.$store.dispatch('hideloader')
          alert('信息更改失败')
          // console.log(error)
        })
      }
    },
    getUserassisretrun(){
      this.assis_btn = true
      this.$router.push({
        path:'/bomNav/Ordershuo/userassispayseccess'
      })
     
    },
    funct(fg){
      console.log(fg)
    }
  }
  ,created(){
    this.userifondetails  = JSON.parse(sessionStorage.getItem('balance'))
    this.userIfonattr = this.userifondetails.user,
    this.inputText = true
    this.inputText2 = true
    // console.log(this.userIfonattr.email != '')
    // console.log(this.userIfonattr.certificationLevel)
    // console.log(this.userifondetails)
    // console.log(this.userIfonattr.contactsPhone != '')
  },
}
</script>
<style lang="scss" scoped>
select {  
  appearance:none;  
  -moz-appearance:none;  
  -webkit-appearance:none;  
  border:0;
}
select::-ms-expand { display: none; } 
.poas_res{
  position: relative;
  top:0rem;
  left:0rem;
  .poas_res_child{
    position: absolute;
    top:0rem;
    right:0rem;
    background:transparent;
    font-size: .24rem;
    color:transparent;
    width: 80%;
    height: 100%;
  }
}
.content_heardPo_box{
  z-index: 53;
}
.contetn_setUp_btn{
  width: 100%;
  height: 1.02rem;
  background: #ff8a2b;
  font-size:.36rem;
  color: #ffd9bb;
  text-align:center;
  line-height:1.02rem;
}
.contetn_setUp_btnBox{
  width: 100%;
  padding:0rem .2rem;
  background: transparent;
  margin-top:.4rem;
  .assis_btn{
    background: #DEDEDE !important;
    color:#C1C1C1;
  }
}
.content_SetUP_btnBOxCor{
  background: #ff7200;
  color:#fff;
}
.content_SetUP_btnBOxCor2{
 background: #e56600;
  color:#fff;
}
.content_Setup{
  width: 100%;
  background: #f2f2f2;
  position: fixed;
  top:.8rem;
  left:0;
  height: 100%;
  .content_li_box{
    // &:nth-child(3){
    //   border-bottom:.1rem solid #f2f2f2;
    // }
    width: 100%;
    border-bottom:.02rem solid #f2f2f2;
    background: #fff;
    height: 1.06rem;
    padding:0rem .4rem;
    .content_li_left{
      width: 95%;
      height: 100%;
      .content_li_leftBOX{
        width: 100%;
        height: 100%;
      }
      .content_li_font{
        font-size:.24rem;
        font-weight: 600;      
        color:#333;
      }
      .content_li_img{
        width: 0.6rem;
        height: 0.6rem;
        // background: #000;
      }
      .content_li_text{
        font-size: .28rem;
        color:#aba8a8;
        width: 80%;
        height: 80%;
        text-align: right;
      }
      .text_color_input{
        color:#DEDEDE;
      }
    }
    .user_con_ifonBoxjiantou{
      width: 0.1rem;
      height: 0.2rem;
    }
  }
  .content_li_img——assis{
    padding-bottom:.4rem;
    img{
      height: 0.5rem;
      width: 0.5rem;
    }
    .assis_text{
      color: #DEDEDE;
      font-size:.24rem;
      margin-left:.1rem;
    }
    .assis_textactibre{
      color: #ff7200;
    }
  }
}
.content_Headportrait{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0rem;
  left:0rem;
  background: rgba(0,0,0,.4);
  z-index: 53;
  .content_HPT_box{
    padding:0rem .2rem;
    width: 100%;
    background: transparent;
    position: relative;
    bottom:-60%;
    height: 4.3rem;
    // font-weight: 600;
    .cntent_HTP{
      width: 100%;
      background: #fff;
      text-align: center;
      margin-bottom:.1rem;
    }
  }   
}
.content_HTp_title{
  width: 100%;
  height: .64rem;
  font-size:.24rem;
  color:#DEDEDE;
  line-height: .64rem;
  border-bottom:.02rem solid #f2f2f2;
}
.content_HTp_Photograph{
  font-size: .36rem;
  color:#FF7200;
  width: 100%;
  height: 100%;
  display: block;
  line-height: 1.16rem;
  border-bottom:.02rem solid #f2f2f2;
  background: #FAFAFA;
}
.content_HTPCOR{
  background: #fff;
}

.posh{
  position: relative;
  width: 100%;
  height:1.16rem;
  
}
.content_HTp_INput{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: transparent;
    color:transparent;
    // filter:alpha(opacity:0);
    // opacity: 0;
    // width:0px 
  }
.slide-block-enter,.slide-block-leave-active{
   opacity: 0;
   -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
}
.slide-block-leave,.slide-block-enter-active{  
  opacity: 1;  
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
    
} 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  font-size: .28rem;
  color:#DEDEDE;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
  font-size: .28rem;
  color:#DEDEDE;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  font-size: .28rem;
  color:#DEDEDE;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  font-size: .28rem;
  color:#DEDEDE;
} 
.footer_box{
  position:fixed;
  z-index: 51;
  left:0rem;
  right:0rem;
  bottom:0rem;
  padding:0rem;
}
</style>
